<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2>一、是什么</h2>
  <div>过滤器（filter）是输送介质管道上不可缺少的一种装置.大白话，就是把一些不必要的东西过滤掉</div>
  <br>
  <div>过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，我们也可以理解其为一个纯函数.Vue 允许你自定义过滤器，可被用于一些常见的文本格式化,Vue3中已废弃filter</div>
  <h2>二、如何用</h2>
  <div>vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示：</div>
  <script>
    // <!-- 在双花括号中 -->
    // {{ message | capitalize }}

    // <!-- 在 `v-bind` 中 -->
    // <div v-bind:id="rawId | formatId"></div>

    // 定义filter
    // filters: {
    //   capitalize: function (value) {
    //     if (!value) return ''
    //     value = value.toString()
    //     return value.charAt(0).toUpperCase() + value.slice(1)
    //   }
    // }

    // 定义全局过滤器：
    // Vue.filter('capitalize', function (value) {
    //   if (!value) return ''
    //   value = value.toString()
    //   return value.charAt(0).toUpperCase() + value.slice(1)
    // })

    // new Vue({
    //   // ...
    // })
  </script>
  <br>
  <div>注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器</div>
  <h4>小结：</h4>
  <ul>
    <li>部过滤器优先于全局过滤器被调用</li>
    <li>一个表达式可以使用多个过滤器。过滤器之间需要用管道符“|”隔开。其执行顺序从左往右</li>
  </ul>
  <h2>三、应用场景</h2>
  <div>平时开发中，需要用到过滤器的地方有很多，比如单位转换、数字打点、文本格式化、时间格式化之类的等</div>
  <br>
  <div>比如我们要实现将30000 => 30,000，这时候我们就需要使用过滤器</div>
  <script>
    // Vue.filter('toThousandFilter', function (value) {
    //     if (!value) return ''
    //     value = value.toString()
    //     return .replace(str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g, '$1,')
    // })
  </script>
  <br>
  <h2>四、原理分析</h2>
  <script>

  </script>
  <h2>小结：</h2>
  <ul>
    <li>在编译阶段通过parseFilters将过滤器编译成函数调用（串联过滤器则是一个嵌套的函数调用，前一个过滤器执行的结果是后一个过滤器函数的参数）</li>
    <li>编译后通过调用resolveFilter函数找到对应过滤器并返回结果</li>
    <li>执行结果作为参数传递给toString函数，而toString执行后，其结果会保存在Vnode的text属性中，渲染到视图</li>
  </ul>
</body>
</html>